import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { argTypesView } from "./helpers/helpers";

export const quadrantDocs= { source: { code: `quadrant := component.NewQuadrant("Status")
    quadrant.Set(component.QuadNW, "Running", fmt.Sprintf("%d", ps.Running))
    quadrant.Set(component.QuadNE, "Waiting", fmt.Sprintf("%d", ps.Waiting))
    quadrant.Set(component.QuadSE, "Failed", fmt.Sprintf("%d", ps.Failed))
    quadrant.Set(component.QuadSW, "Succeeded", fmt.Sprintf("%d", ps.Succeeded))`
}}

export const quadrantView = {
  metadata: {
    type: "quadrant",
    title: [{metadata: {type: "text"}, config: {value: "Status"}}]
  },
  config: {
    nw: {value: 1, label: "Running"},
    ne: {value: 0, label: "Waiting"},
    se: {value: 0, label: "Failed"},
    sw: {value: 0, label: "Succeeded"}
  }
};

export const QuadrantStoryTemplate = args => ({
  template: `
          <div class="content-container" style="width: 300px; height: 200px;">
              <div class="content-area">
                <app-view-quadrant [view]="view"></app-view-quadrant>
              </div>
           </div>
   `,
  argTypes: argTypesView,
  props: { view: args.view },
});

<h1>Quadrant component</h1>
<h2>Description</h2>

<p>The Quadrant component is used to display a current state of four different properties.
In Octant, this is used to show number of pods with Waiting, Running, Failed and Succeeded status.</p>
<h2>Example</h2>

<Meta title="Components/Quadrant" argTypes = { argTypesView } />

<Canvas withToolbar>
  <Story name="Quadrant component"
         parameters={{ docs: quadrantDocs }}
         height="350px"
         args= {{ view: quadrantView }}>
    { QuadrantStoryTemplate.bind({}) }
  </Story>
</Canvas>

<h2>Props</h2>
<ArgsTable story = "Quadrant component" />
